<template>
  <div class="menu d-flex _m-2">
    <router-link
      to="/list/shelf"
      tag="div"
      class="d-flex flex-1 align-items-center justify-content-center flex-direction-column"
    >
      <div class="icon">
        <i class="iconfont icon-shujia1 shelf-bg"></i>
      </div>
      <p>书架</p>
    </router-link>
    <router-link
      to="/list/sort"
      tag="div"
      class="d-flex flex-1 align-items-center justify-content-center flex-direction-column"
    >
      <div class="icon">
        <i class="iconfont icon-leimupinleifenleileibie sort-bg"></i>
      </div>
      <p>分类</p>
    </router-link>
    <router-link
      to="/users/center"
      tag="div"
      class="d-flex flex-1 align-items-center justify-content-center flex-direction-column"
    >
      <div class="icon">
        <i class="iconfont icon-huiyuan1 member-bg"></i>
      </div>
      <p>我的</p>
    </router-link>
    <router-link
      to="/1"
      tag="div"
      class="d-flex flex-1 align-items-center justify-content-center flex-direction-column"
    >
      <div class="icon">
        <i class="iconfont icon-wanjie over-bg"></i>
      </div>
      <p>排行</p>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "IconMenu"
};
</script>

<style lang="stylus" scoped>
.menu {
  height: 90px;
  background: #FFF;

  .icon {
    height: 55px;
    line-height: 55px;

    .iconfont {
      font-size: 28px !important;
    }
  }

  p {
    font-size: 14px;
  }

  .shelf-bg {
    color: #fa6484;
  }

  .sort-bg {
    color: #00c98d;
  }

  .member-bg {
    color: #ff9359;
  }

  .over-bg {
    color: #67a4e6;
  }
}
</style>
